<script setup>
import { nextTick, onMounted, reactive, ref } from 'vue'
import { userAdd, getUserList, userDelete, editApi, getFriendList } from '@/api/user'
import { ElMessage } from 'element-plus'
import useInstance from '@/hooks/userInstance'
import userInfoStore from '@/stores/userInfo.js'

const userInfo = userInfoStore()
const { global } = useInstance()
const searchParm = reactive({
  friendname: '',
  userId:''
})
//新增表单模板
const addModel = reactive({
  friendname: ''
})
//新增弹窗开关状态
let addFormShow = ref(false)
//表单标题
let menuTitle = ref('')
const addRef = ref()
//按钮类型
const tags = ref('')
const selectRef = ref()

const rules = reactive({
  friendname: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
})

const resetForm = () => {
  addModel.friendname = ''
  nextTick(() => {
    selectRef.value.clear()
  })
}

const submitForm = () => {
  addRef.value.validate(async valid => {
    if (valid) {
      let res = null
      if (tags.value === '0') {
        res = await userAdd(addModel)
        ElMessage.success('新增成功')
      } else {
        if (addModel.roleId === '') {
          ElMessage.error('请选择角色')
        } else {
          res = await editApi(addModel)
          ElMessage.success('修改成功')
          addFormShow.value = false
        }
      }
    } else {
      ElMessage.error('填写信息错误')
    }
    await getList()
  })
}
const closeForm = () => {
  addFormShow.value = false
  resetForm()
}
//新增按钮
const addBtn = () => {
  tags.value = '0'
  addFormShow.value = true
  menuTitle.value = '新增用户'
  resetForm()
  getSelect()
}
//删除按钮
const deleteBtn = async user => {
  const confirm = await global.$myConfirm('确定要删除吗？')
  let id = user.id
  if (confirm) {
    let res = await userDelete(id)
    if (res) {
      ElMessage.success('删除成功')
    }
    await getList()
  }
}
//搜索按钮
const searchBtn = () => {
  getList()
}
//重置按钮
const resetBtn = () => {
  searchParm.friendname = ''
  getList()
}
//页容量改变时触发
const sizeChange = size => {
  searchParm.pageSize = size
  getList()
}
//页码改变时触发
const currentChange = page => {
  searchParm.currentPage = page
  getList()
}
const getState = (friendname) => {
  return localStorage.getItem(friendname) ? "在线" : "离线";
};

//表格数据
const tableList = ref([])

//查询用户信息
const getList = async () => {
  searchParm.userId = userInfo.info.id
  let res = await getFriendList(searchParm)
  console.log(res)
  tableList.value = res.data
  console.log(tableList.value)
}
onMounted(() => {
  getList()
})
</script>

<template>
  <el-main>
    <!-- 搜索栏 -->
    <el-form :model="searchParm" :inline="true" size="default">
      <el-form-item>
        <el-input placeholder="请输入用户名" v-model="searchParm.friendname" />
      </el-form-item>
      <el-form-item>
        <el-button icon="Search" @click="searchBtn">查询</el-button>
        <el-button icon="Close" type="danger" plain @click="resetBtn"
          >重置</el-button
        >
        <el-button icon="Plus" type="primary" @click="addBtn"
          >添加好友</el-button
        >
      </el-form-item>
    </el-form>
    <!--表格数据-->
    <el-table :data="tableList" style="width: 100%">
      <el-table-column type="selection" min-width="5%" />
      <el-table-column prop="username" label="姓名" min-width="35%" />
      <el-table-column label="在线状态" min-width="40%">
        <template #default="scope">
          {{ getState(scope.row.friendname) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="10%">
        <template #default="scope">
          <el-button
            link
            type="danger"
            icon="Delete"
            size="small"
            @click="deleteBtn(scope.row)"
            >删除该好友</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-main>
  <!--  分页-->
  <el-pagination
    @size-change="sizeChange"
    @current-change="currentChange"
    v-model:current-page="searchParm.currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="searchParm.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="searchParm.total"
    background
  >
  </el-pagination>
  <!--  新增，编辑弹窗-->
  <el-dialog v-model="addFormShow" :title="menuTitle" width="50%">
    <el-form
      :model="addModel"
      ref="addRef"
      :rules="rules"
      label-width="120px"
      size="default"
      :inline="false"
    >
      <el-row>
        <el-col :span="10">
          <el-form-item prop="friendname" label="用户名：">
            <el-input v-model="addModel.friendname" placeholder="请输入用户名" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeForm">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
